import React, { useCallback, useContext, useEffect, useState } from 'react'
import { useAddStudentMutation, useGetStudentByIdQuery, useUpdateStudentMutation } from '../store/modules/student/studentApi'

function StudentForm(props) {

    const [inputData, setInputData] = useState({
        name: '',
        age: '',
        address: '',
        gender: '男'
    })
    //添加学生的钩子
    const [addStudent, resultAdd] = useAddStudentMutation()
    //修改学生的钩子
    const [updateStudent, resultUpdate] = useUpdateStudentMutation()
    // 调用钩子来获取数据
    const { data: stuData, isSuccess } = useGetStudentByIdQuery(props.stuId, {
        skip: !props.stuId,
        refetchOnMountOrArgChange: false//设置是否每次都重新加载数据
    })
    //studentForm一加载，应该去自动的加载最新的学生数据
    useEffect(() => {
        if (isSuccess) {

            setInputData(stuData.attributes)
        }
    }, [isSuccess])

    //添加按钮回调
    const submiteData = () => {
        //调用触发器
        addStudent(inputData)
        //重置数据
        setInputData({
            name: '',
            age: '',
            address: '',
            gender: '男'
        })
    }
    //修改按钮回调
    const updateData = () => {
        //调用触发器
        updateStudent({
            id:props.stuId,
            attributes:inputData
        })
        //退出编辑模式
        props.cancelEdit()
    }
    const nameChangeHandler = (e) => {
        setInputData(pre => ({ ...pre, name: e.target.value }))
    }
    const ageChangeHandler = (e) => {
        setInputData(pre => ({ ...pre, age: +e.target.value }))
    }
    const genderChangeHandler = (e) => {
        setInputData(pre => ({ ...pre, gender: e.target.value }))
    }
    const addressChangeHandler = (e) => {
        setInputData(pre => ({ ...pre, address: e.target.value }))
    }




    return (
        <>

            <tr>
                <td>
                    <input
                        onChange={nameChangeHandler}
                        value={inputData.name}
                        type="text" />
                </td>
                <td><select
                    onChange={genderChangeHandler}
                    value={inputData.gender}>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select></td>
                <td>
                    <input
                        type="number"
                        onChange={ageChangeHandler}
                        value={inputData.age} />
                </td>
                <td>
                    <input
                        type="text"
                        onChange={addressChangeHandler}
                        value={inputData.address} />
                </td>
                <td>
                    {props.stuId &&
                        <><button onClick={updateData}>更新</button>
                            <button onClick={props.cancelEdit}>取消</button></>

                    }

                    {!props.stuId && <button onClick={submiteData}>添加</button>}
                </td>
            </tr>
            {/* {loading && <tr> <td colSpan={5}>数据正在添加中</td></tr>}
            {errorMsg && <tr> <td colSpan={5}>{errorMsg}</td></tr>} */}
        </>
    )
}

export default StudentForm